import './index.scss'
import { FC, useEffect, useState } from "react";
import { Button, Flex, Layout, Steps } from "antd";
import BaseInfoComponent from "./base";
import { DesignComponent } from "./design";
import FlowComponent from "./flow";
import { LeftOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { StepsInterface, StepItemInterface, BaseInfoInterface } from '../../types/interface/common.interface';
import FieldsComponent from './fields';


const { Header, Content } = Layout;
const FormComponent: FC = () => {
    const navigate = useNavigate(); // 在顶层调用useNavigate
    // 基础属性
    const [formData, setFormData] = useState<{
        base: BaseInfoInterface;
        design: string;
        fields: string;
        flow: any;
    }>({
        base: { name: '', group_id: '', remark: '', publisher: [], administrators: [] },
        fields: `{"data":[]}`,
        design: `{"data":[]}`,
        flow: {}
    });


    const [step_index, set_step_index] = useState<number>(0);

    // 函数
    const step_change = (value: number) => {
        set_step_index(value);
    };

    const back_to_group = (): void => {
        navigate("/form/group")
    }

    const publishClick = (): void => {
        console.log("发布")
    }

    const designChange = (design_json: string) => {
        console.log(design_json)
        setFormData(pre_value => ({ ...pre_value, design: design_json }))
    }

    const form_steps: Array<StepsInterface> = [
        {
            title: '基本信息',
            key: 0,
            content:
                <BaseInfoComponent value={formData.base}
                    onChange={(values) => {
                        console.log(values)
                        setFormData(pre_value => ({ ...pre_value, base: values }))
                    }} />,
        },
        {
            title: '字段设计',
            key: 1,
            content:
                <FieldsComponent filedJsonString='fields'
                    valueChange={(values) => {
                        setFormData(pre_value => ({ ...pre_value, fields: values }))
                    }}
                />,
        },
        {
            title: '表单设计',
            key: 2,
            content: <DesignComponent DesignChange={designChange} design={formData.design} />,
        },
        {
            title: '流程设计',
            key: 3,
            content: <FlowComponent />,
        },
    ];

    useEffect(() => {

    }, []);


    // 设置选项卡
    const step_items: Array<StepItemInterface> = form_steps.map((step) => ({ key: step.key, title: step.title }));
    return (
        <Layout className='form-component'>
            <Header className='header'>
                <Flex justify='space-between' wrap={false}>
                    <div className='left'>
                        <LeftOutlined onClick={back_to_group} />
                    </div>
                    <Flex className='center' justify='center' vertical={true}>
                        <Steps current={step_index} items={step_items} onChange={step_change} responsive={false} />
                    </Flex>
                    <div className='right'>
                        <Button type='primary' onClick={publishClick}>
                            发布
                        </Button>
                    </div>
                </Flex>
            </Header>
            <Content className='content flex-center'>
                {form_steps[step_index].content}
            </Content>
        </Layout>
    )
}
export default FormComponent;